<script setup lang="ts">
import {registerForService} from '@/api/service/common.ts'
import { reactive } from 'vue'
import axios, { type AxiosPromise } from "axios"
import { ElMessage } from 'element-plus'
import router from '@/router'
const userModel = reactive({
  username:'',
  password:''
})


function register() {
    registerForService(userModel).then(data => {
       if(data.status == 200) {
        router.push('/login');
       } else {
        ElMessage.error("请求错误");
       }
    })
}
</script>
<template>
    <div class="Div">
         <div class="zc">
         </div>
         <div class="zc1">
             <h1>注册</h1>
             <div class="tou">
                 <img src="../../public/tou.png">
             </div>
             <div class="fr">
                 <!-- <form class="fr1">
                     <input type="text" placeholder="用户名" v-model="username" ><br/>
                     <input type="password" v-model="password1" placeholder="设置密码" ><br/>
                     <input type="password" v-model="password2" placeholder="确认密码" ><br/>
                     <div class="ti">
                        <p v-if="passwordsMatch"></p>
                        <p v-else class="P">密码错误</p>
                     </div>
                     
                     <input type="button" value="注册" id="bnt" @click="register()"><br/>
                     <span>已经有账号了?<RouterLink to="/login">登陆</RouterLink></span>
                 </form> -->
                 <el-row >
                        <el-col >
                        <el-form :model="userModel" label-width="120px" style="background-color: aliceblue;padding:60px 20px 20px 20px;" size="large" >
                        <el-form-item label="用户名">
                            <el-input v-model="userModel.username" placeholder="请输入用户名" style="min-width: 400px;"/>
                        </el-form-item>
                        
                        <el-form-item label="密码">
                            <el-input v-model="userModel.password" size="large" placeholder="请输入密码" type="password"/>
                        </el-form-item>
                        
                        <el-form-item>
                        <el-col :span="11" :offset="12">
                        <el-button type="primary" size="large" @click="register()" >注 册</el-button>
                        </el-col>
                        </el-form-item>
                    </el-form>
                    </el-col>
                </el-row>
             </div>
         </div>
    </div>
</template>
<style scoped>
*{margin: 0;padding: 0;}
			.Div{
				width: 100%;
				height: 100%;
				background: url(../../public/login.jpg);
				background-size: 100% 100%;
				position: fixed;
				top: 0;
                position: absolute;
			}
            .zc{
                width: 35%;
                height: 600px;
                background-color: #620ed8;
                opacity: 0.5;               
                border-radius: 10px;
                margin: 0 auto;
                margin-top: 55px;
                z-index: 1;
            }
            .zc1{
                width: 35%;
                height: 600px;            
                border-radius: 10px;
                /* background-color: #000; */
                position: absolute;
                top: 55px;
                left: 32.5%;
                z-index: 9;
            }
            .zc1 h1{
                color:#000; 
                position: relative;
                top: 30px;
                left: 43%;
            }
            .tou{
                width: 100px;
                height: 100px;
                margin: 0 auto;
                margin-top: 50px;
                z-index: 9;
            }
            .tou img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                cursor: pointer;
                z-index: 9;
                transition: transform 0.5s ease;
            }
            .tou:hover img{transform:scale(1.05)}
            .fr{
                width:100%;
            }
            .fr1{
                width: 50%;
                margin: 0 auto;
            }
            .fr1 .ti{
                width: 100%;
                height: 10px;
            }
            input[type=text],input[type=password]{
				width:100%;
				height: 30px;
				border-radius: 5px;
                margin-top: 35px;
				/* margin-left: 23%;
				margin-top: 20px; */
			}
            input[type=button]{
                width:100%;
				height: 50px;
				border-radius: 25px;
                margin-top: 35px;
                cursor: pointer;
                transition: transform 0.5s ease;
                background-color: #aa84df;
            }
            input[type=button]:hover{
				transform: scale(1.01);
			}
            .fr1 span{
                color: aliceblue;
                margin-left: 20%;
            }
            .fr1 a{
                color: rgb(17, 123, 216);
                text-decoration: none;
                margin-left: 5%;
            }
</style>
